<template>
	<view style="height: 100%;">
	
		<view style="height: 100%;">
			<block :key="index" v-for="(item,index) in comments">
				<view class="flex-col" style='widht:100%;margin-top:33upx;box-sizing: border-box;padding-left:24upx;padding-right:24upx;'>
					<view class='flex-row' style='align-items: center;'>
						<image :src='item.headPortrait'> </image>
						<text style='margin-left:18upx;color:#333333;font-size:34upx;line-height:34upx;font-weight:bold;'>{{item.nickname}}</text>
					</view>
					<text style='color:#808080;font-size:26upx;margin-top:5upx;margin-left:70upx;'>点评时间:{{item.createTimeStr}}</text>
					<text style='color:#1A1A1A;font-size:30upx;margin-top:25upx;margin-left:70upx;'>{{item.content}}</text>
					<view v-if="index < comments.length - 1" style='margin-top:43upx; width:100%;height:1px;background:#F7F7F7'></view>
				</view>
			</block>
		</view>
		
		<view style="height:99upx;"></view>
		<view v-if="isNoMore" style='margin-bottom: 155upx; width:100%;height:99upx;margin-top:55upx;background:#ffffff;display:flex;flex-direction:row;align-items: center;justify-content: center;'>
			<view style='background:#B3B3B3;width:95upx;height:1px;'></view>
			<text style='color:#999999;font-size:26upx;margin-left:15upx;'>没有更多评论了</text>
			<view style='margin-left:15upx;background:#B3B3B3;width:95upx;height:1px;'></view>
		</view>
		<view class="push-Comment">
			<view class="pushComment">
				<view class="cment cmentCont" :style="inputMarBot?'margin-bottom:50upx':''">
					<input placeholder="请发表评论" v-model="cont" ></input>
				</view>
				<view class="cment">
					<view class="pusll" @click="saveHotelComment()">发表</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: 1,
				navbarData: {
					showCapsule: 1, //是否显示左上角图标
					title: '所有点评', //导航栏 中间的标题,
					showLine: true
				},
				// navbarHeight: app.globalData.navBarHeight,
				comments: [],
				cont: '',
				busid: '',
				isNoMore: false,
				isEmpty: false,
				inputMarBot: false, //评论框聚焦时，让评论框距离底部的距离为50rpx
				bustype: ''
			};
		},
		onLoad: function(options) {
			this.currentPage = 1
			console.log("评论列表传过来的参数-------------------》", options)
			this.busid = options.id
			this.navbarData.title = options.title
			// this.getHotelComment(options.id);
			console.log(options)
		},
		onShow:function(){
			this.getHotelComment(this.busid);
		},
		onReachBottom:function(){
			if(!this.isNoMore && !this.isSearch){
				this.getHotelComment(this.busid)
			}
		},
		methods: {
			//获取评论
			getHotelComment: function(id) {
				var busid = id
				var params = {
					pageIndex: this.currentPage,
					pageSize: 5,
					channelType: '1',
					// bustype: that.data.bustype,
					busid: busid
				}
				this.$postApi(this.$path.GET_NEW_COMMENT_LIST, params).then(res => {
					console.log("根据ID返回的评论参数>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<", res)
					if (res.data.success) {
						var data = res.data.data

						console.log("1", this.comments)
						// console.log('that.data-------------------', that.data)
						if (this.currentPage == 1) {
							var content = data.list
						} else {
							var content = this.comments.concat(data.list)

						}

						var isNoMore = false;
						var isEmpty = false;
						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
						} else if (!data.hasNextPage) {
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						this.currentPage++;
						this.comments = content,
						this.isNoMore = isNoMore,
						this.isEmpty = isEmpty



					}
				})
			},
			//发表品论
			saveHotelComment: function() {
				let that = this
				// let cont = this.cont
				// let busid = this.busid
				if(!that.cont){
					that.pub.showError('请输入评论内容')
					return
				}
				uni.getUserInfo({
				  provider: 'weixin',
				  success:(infoRes)=>{
					console.log(infoRes)
				    console.log('用户昵称为：' + infoRes.userInfo.nickName);
					console.log('用户头像为：' + infoRes.userInfo.avatarUrl);
					if (infoRes.userInfo) {
						var params = {
							content: that.cont,
							headPortrait: infoRes.userInfo.avatarUrl,
							nickname: infoRes.userInfo.nickName,
							busid: that.busid,
							// bustype: this.data.bustype,
							channelType: 1
						}
						console.log(">>>>>>>>>>>>>>>>>>>>>>>>",params)
						that.$postApi(that.$path.PUBLISH_COMMENT_LIST, params).then(res => {
							console.log("发表的评论返回的参数>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<", res)
							if (res.data.success) {
								that.cont = ''
								that.currentPage = 1;
								that.getHotelComment(that.busid);
							}
					
						})
					} else {
					
						this.cont = ''
					
					
					}
				  }
				});
				

			},
		}
	}
</script>

<style lang="scss">
	/* pages/commentList/commentList.wxss */
	page {
		background-color: #fff;
	}

	.flex-col{
		display: flex;
		flex-direction: column;
	}
	.flex-row{
		display: flex;
		flex-direction: row;
	}
	.flex-row image {
		width: 54upx;
		height: 54upx;
		border-radius: 50%;
	}

	.pushComment {
		box-shadow: 0upx 20upx 20upx 10upx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-top: 10upx 0 10upx 0;
	}

	.cment {
		padding: 50upx 30upx 50upx 30upx;
	}

	.push-Comment {
		width: 100%;
		padding-bottom: 20upx;
	}

	.pushComment input {
		padding-left: 20upx;
		font-size: 30upx;
		height: 60upx;
		border: 0.5upx solid #cdcdcd;
		border-radius: 50upx;
	}

	.cmentCont {
		width: 70%;
	}

	.pusll {
		padding: 3upx 21upx;
		font-size: 30upx;
		line-height: 60upx;
		border: 0.5upx solid #cdcdcd;
		border-radius: 15upx;
		background: #0092ff;
		color: #fff;

	}

	.pusll:active {
		background: #00b7ff;
	}
</style>
